<template>
  <div class='mobile-singleFill-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请输入内容
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_length"'>
      请输入{{extendAttr.minLength}}~{{extendAttr.maxLength}}个字
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_text"'>
      格式有误，请输入文本
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_number"'>
      格式有误，请输入数字
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_en"'>
      格式有误，请输入字母
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_cn"'>
      格式有误，请输入中文
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_email"'>
      格式有误，请输入Email地址
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_phone"'>
      格式有误，请输入手机号码
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_url"'>
      格式有误，请输入网址
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "fill_indentification"'>
      格式有误，请输入身份证
    </div>
    <!-- size 是 small -->
    <input
      v-if='extendAttr.size === "small"'
      class='singleFill-input'
      :class='{
        recordCorrect:isRecordCorrect && question.useAnswer,
        recordError:isRecordError && question.useAnswer
      }'
      type="text"
      @focus='resetValidType'
      v-model='question.resultText'
      :disabled='isRecord'>
    <!-- size 是 middle 或 large -->
    <textarea
      v-if='extendAttr.size !== "small"'
      class='singleFill-textarea'
      :class='{
        middle: extendAttr.size === "middle",
        large: extendAttr.size === "large",
        recordCorrect:isRecordCorrect && question.useAnswer,
        recordError:isRecordError && question.useAnswer
      }'
      type='text'
      @focus='resetValidType'
      v-model='question.resultText'
      :disabled='isRecord'>
    </textarea>
    <!-- 答案相关 -->
    <div class='qa-answer'
         v-if='isRecord &&
               question.useAnswer'>
      <!-- 分数 -->
      <div class='qa-score-wrapper'>
        <div class='score-label'>分值：</div>
        <div class='score-number'>{{question.score || 0}}分</div>
      </div>
      <!-- 计分方式 -->
      <div class='qa-answer-parse'>
        <div class='answer-title'>计分方式：</div>
        <div class='answer-content'
             v-show='question.scoringWay === "ALL_RIGHT_RESULT_SAME"'>
          回答与答案相同即可得分
        </div>
        <div class='answer-content'
             v-show='question.scoringWay === "ALL_RIGHT_RESULT_CONTAIN"'>
          回答中包含答案即可得分
        </div>
      </div>
      <!-- 正确答案 -->
      <div class='qa-answer-parse'
           v-if='answers[0]'>
        <div class='answer-title'>正确答案：</div>
        <div class='answer-content' v-show='!answers[0]'>无</div>
        <ul class='answer-list' v-show='answers[0]'>
          <li class='answer-item'
              v-for='(answer, index) of answers'
              :key='index'>
            {{answer}}
          </li>
        </ul>
      </div>
      <!-- 答案解析 -->
      <div class='qa-answer-parse'
           v-if='question.answerParse'>
        <div class='answer-title'>答案解析：</div>
        <div class='answer-content' v-html='question.answerParse'></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mobileSingleFill',
  data () {
    return {
      extendAttr: {
        size: 'small',
        validate: 'none',
        minLength: 1,
        maxLength: 10,
        defaultText: ''
      },
      answers: [], // 用于回显填空题答案的数组
      isRecordCorrect: false,
      isRecordError: false
    }
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
    },
    init () {
      // 获取单项填空题的额外配置项
      let extendAttr = JSON.parse(this.question.extendAttr || '{}')
      this.assignKey(this.extendAttr, extendAttr)
      // console.log('extendAttr: ', this.extendAttr)
      // 默认文本
      if (this.extendAttr.defaultText) {
        this.question.resultText = this.extendAttr.defaultText
      }
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        // 如果设置了答案，则获得答案
        let optionList = this.question.optionList
        if (optionList && optionList[0] && optionList[0].textResult) {
          this.answers = optionList[0].textResult.split(/;|；/) // 多个答案之间通过分号分隔
        } else {
          this.answers = []
        }
        // 回显答案
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          if (optionResults[0]) {
            this.question.resultText = optionResults[0].resultText || ''
            // 如果没有输入答案，且该题是选填题，则不用判断对错
            if (!this.question.isRequired && !this.question.resultText) {
              return false
            }
            // 判断答案是否正确
            let isMatch
            if (this.question.scoringWay === 'ALL_RIGHT_RESULT_SAME') {
              isMatch = this.answers.filter(answer => answer === this.question.resultText)[0]
            } else if (this.question.scoringWay === 'ALL_RIGHT_RESULT_CONTAIN') {
              isMatch = this.answers.filter(answer => this.question.resultText.indexOf(answer) !== -1)[0]
            }
            // 如果与正确答案匹配成功
            if (isMatch) {
              this.isRecordCorrect = true
            // 如果没有设置正确答案
            } else if (!this.answers[0]) {
              this.isRecordCorrect = true
            } else {
              this.isRecordError = true
            }
          }
        }
      }
    }
  },
  created () {
    this.init()
    console.log('question: ', this.question)
  }
}
</script>

<style lang="stylus" scoped>
.mobile-singleFill-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  .singleFill-input
    display block
    width 100%
    height 36px
    line-height 18px
    padded_box(border-box, 9px 10px)
    font-size 14px
    background #fff
    border 1px solid #dde5ed
    border-radius 4px
    outline none
    -webkit-appearance: none
    &:focus
      border-color #2672ff
    &:disabled
      opacity 1
    &.recordCorrect
      background rgba(33, 166, 90, 0.1)
      border-color #21a65a
    &.recordError
      background rgba(182, 44, 44, 0.1)
      border-color #b62c2c
  .singleFill-textarea
    display block
    width 100%
    line-height 1.5
    padded_box(border-box, 5px 10px)
    font-size 14px
    background #fff
    border 1px solid #dde5ed
    border-radius 4px
    resize none
    outline none
    -webkit-appearance: none
    scroll()
    &:disabled
      opacity 1
    &:focus
      border-color #2672ff
    &.middle
      height 72px
    &.large
      height 108px
    &.recordCorrect
      background rgba(33, 166, 90, 0.1)
      border-color #21a65a
    &.recordError
      background rgba(182, 44, 44, 0.1)
      border-color #b62c2c
  .qa-answer
    margin 15px 0 10px
    border-top 1px dashed #dde5ed
    .qa-score-wrapper
      border-bottom 1px dashed #dde5ed
      padding 10px
      display flex
      align-items center
      .score-label
        font-size 14px
        color #333
      .score-number
        font-size 14px
        color #aaa
    .qa-answer-parse
      border-bottom 1px dashed #dde5ed
      border-radius 4px
      padding 10px
      .answer-title
        font-size 14px
        color #333
        margin-bottom 10px
      .answer-list
        display flex
        flex-wrap wrap
        .answer-item
          font-size 14px
          color #aaa
          border 1px solid #ccc
          margin 0 6px 6px 0
          padding 3px 4px
          border-radius 2px
          // background #f5f5f5
      .answer-content
        font-size 14px
        line-height 1.5
        color #aaa
        >>> img, >>> iframe, >>> video
          max-width 100% !important
</style>
